<template>

  <el-container style="height: 100vh; border: 1px solid #eee;">
    <el-aside>
      <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">expand</el-radio-button>
      <el-radio-button :label="true">collapse</el-radio-button>
      </el-radio-group> -->
    <el-menu 
      class="el-menu-vertical-demo"
      text-color="rgb(160, 151, 163)"
      :router="true"
      :default-active="defaultActive"
      :unique-opened="true"
      :collapse="isCollapse"
      :collapse-transition=false
      
      >
      <!-- <h4 class="back-stage">后台管理</h4> -->
      <el-sub-menu :index="item.id+''" v-for="item in menusData" :key="item.id">
        <template #title>
          
          <i :class="iconlist[item.id]"></i>
           <span> {{item.authName}}</span>
            </template>
          <el-menu-item :index="'/home/'+_item.path" v-for="_item in item.children" :key="_item.id">
          <template #title>
            <span>{{_item.authName}}</span>
          </template>
          </el-menu-item>
  
      </el-sub-menu>
     
    </el-menu>
  </el-aside>
  <el-container>
    <el-header style="text-align: right; font-size: 12px; height:60px; line-height:60px">
      <el-button icon="el-icon-menu" class="metu-btn"  plain @click="toggleCollapse"></el-button>
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <template #dropdown>
        <el-dropdown-menu >
          <el-dropdown-item>
            <span  @click="exit">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span>{{$store.state.username}}</span>
    </el-header>

  <router-view></router-view>
   
  </el-container>
</el-container>
</template>

<script>
import {getMenus} from "../http/api.js"
import { reactive ,getCurrentInstance,computed,onMounted,ref} from 'vue'
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
 setup(){
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    const tableData =reactive([])
    const menusData=reactive([])
    var isCollapse=ref(true)
    var iconlist=reactive({
      125: "el-icon-user-solid",
      103: "el-icon-more",
      101: "el-icon-s-goods",
      102: "el-icon-document",
      145: "el-icon-s-data",
    })
    const defaultActive = computed(()=>{
      // if(proxy.$route.path==="/home/addgoods"){
      //   return "/home/goods"
      // }
      return proxy.$route.path 
    })
   var toggleCollapse=()=>{
          isCollapse.value=!isCollapse.value
      
    }
  
    const exit=()=>{
        localStorage.removeItem("token")
        localStorage.removeItem("username")
        store.commit('clearUsername')
        router.push({
          name:"Login"
        })
      }
    onMounted(()=>{
      getMenus().then(res=>{
            console.log(res)
              Object.assign(menusData, res) 
         console.log("###",menusData)
          })
    })
    return {tableData,menusData,isCollapse,defaultActive,exit,iconlist,toggleCollapse

    }
 }
  
}
</script>
<style lang="scss" scoped>
::v-deep .el-aside{
  width: auto;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.metu-btn{
      float: left;
      margin-top: 10px;
    }

</style>
